<template>
  <div class="mine">
    <myHead title="我的"></myHead>
    <div class="mine-top">
      <UploadAvatar></UploadAvatar>
      <h4 class="userinfo">
        <span v-if="!appphone" @click="$router.push({ name: 'login' })"
          >立即登录</span
        >
        <span v-else>
          <template v-if="userinfo">
            {{ userinfo.username }}/{{ userinfo.userphone }}
          </template>
        </span>
      </h4>
    </div>
    <div class="mine-middle">
      <div class="mine-middle-one item">
        <img
          src=""
          alt=""
        />
        <p>电影订单</p>
      </div>
      <div class="mine-middle-two item">
        <img
          src=""
          alt=""
        />
        <p>商品订单</p>
      </div>
    </div>

    <van-cell-group>
      <van-cell
        v-if="appphone"
        icon="search"
        title="电影券"
        :to="{ name: 'quan' }"
        is-link
      />
      <van-cell v-if="appphone" icon="search" title="余额" is-link />
      <van-cell v-if="appphone" icon="search" title="红包" is-link />
      <van-cell v-if="appphone" icon="search" title="观影历史" is-link />
      <van-cell icon="search" title="关于我们" is-link />
      <van-cell icon="setting-o" title="设置" is-link />
    </van-cell-group>

    <van-button v-if="appphone" class="outlog-btn" @click="confirmLogout">
      退出登录
    </van-button>
  </div>
</template>

<script>
import { mymixins } from "@/utils/mixins";
import { Dialog } from "vant";
import UploadAvatar from '@/views/mines/uploadAvatar.vue'
export default {
  name: "mine",
  mixins: [mymixins],
  components:{UploadAvatar

  },
  mounted() {
    if (this.appphone) {
      this.$ajax
        .getuserinfo({
          phone: this.appphone,
        })
        .then((res) => {
          if (res.code == 200) {
            this.changeUserInfo(res.result);
          }else{
            this,changeAppPhone(null)
          }
        });
    }
  },
  methods: {
    confirmLogout() {
      Dialog.confirm({
        title: "弹出提示",
        message: "确认退出？",
      })
        .then(() => {
          this.changeAppPhone(null);
          localStorage.removeItem('server_token')
          this.$router.push({ name: "login" });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>


<style lang="scss" scoped>
.logout-btn {
  width: 100%;
  margin: 10px;
}
.mine {
  overflow: auto;
  height: 100%;
  padding-bottom: 70px;
}

.mine-middle {
  display: flex;
  margin-bottom: 10px;
  .item {
    flex: 1;
    height: 80px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 26px;
      height: 26px;
      margin-bottom: 10px;
    }

    p {
      font-size: 14px;
      color: #666;
    }
  }
}
.avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.mine-top {
  width: 100%;
  height: 160px;
  padding-left: 22px;
  padding-top: 22px;
  background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png)
    0 0 no-repeat;
  background-size: 100% 200px;
  display: flex;
  align-items: center;
}

.userinfo {
  margin-left: 15px;
  color: #fff;
  font-size: 16px;
}
</style>